<template>
  <div class="shop app_content">
    <div class="flexCenter">
      <van-field
        style="width: 80%; border-radius: 10px 10px 0 0"
        v-model="formData.staff_name"
        placeholder="请输入员工名称"
        label="员工名称"
        :rules="[{ required: true, message: '请输入员工名称' }]"
      />
      <van-field
        style="width: 80%"
        v-model="formData.custemer_add_num"
        placeholder="请输入员工新增数"
        type="digit"
        label="新增数"
        :rules="[{ required: true, message: '请输入员工新增数' }]"
      />
      <van-field
        style="width: 80%"
        v-model="formData.custemer_low_num"
        placeholder="请输入员工流失数"
        type="digit"
        label="流失数"
        :rules="[{ required: true, message: '请输入员工流失数' }]"
      />
      <van-field
        style="width: 80%"
        v-model="formData.custemer_add_distinct_num"
        placeholder="请输入员工去重后新增数"
        type="digit"
        label="去重后新增"
        :rules="[{ required: true, message: '请输入员工去重后新增数' }]"
      />
      <van-field
        style="width: 80%; border-radius: 0 0 10px 10px"
        v-model="formData.custemer_low_distinct_num"
        name="pattern"
        placeholder="请输入员工去重后流失数"
        type="digit"
        label="去重后流失"
        :rules="[{ required: true, message: '请输入员工去重后流失数' }]"
      />
      <div style="margin-top: 10vh">
        <van-button
          round
          block
          type="primary"
          style="width: 75vw"
          @click="start"
        >
          提交
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup name="UpdateDate">
import { showDialog } from "vant";
const formData = ref({
  staff_name: "",
  custemer_add_num: "",
  custemer_low_num: "",
  custemer_add_distinct_num: "",
  custemer_low_distinct_num: "",
});
document.title = "测试流量12月";
const start = () => {
  $globalRequest("api/QD2updateData4", formData.value, { method: "post" }).then(
    (res) => {
      showNotify("新增成功");
      formData.value = {};
    }
  );
};
const showNotify = (message) => {
  showDialog({
    title: "提示",
    message: message,
  });
};
</script>
<style scoped lang="less">
.flexCenter {
  width: 100vw;
  height: 100vh;
  background: #e7eefd;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
